<template>
  <div class="container">
    <table class="order-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>工单编号</th>
          <th>工单名称</th>
          <th>计划生产物品</th>
          <th>状态</th>
          <th>进度</th>
          <th>负责人</th>
          <th>所在部门</th>
          <th>工序数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(order, index) in orders" :key="order.productionworkorderNameId">
          <td>{{ index + 1 }}</td>
          <td>{{ order.productionworkorderNameId }}</td>
          <td>{{ order.productionworkorderId }}</td>
          <td>{{ order.productionworkorderWId }}</td>
          <td>{{ order.productionworkorderType }}</td>
          <td>
            <span v-for="(percent, i) in order.progress" :key="i" :style="{ color: getProgressColor(percent) }">
              {{ percent }}%
            </span>
          </td>
          <td>{{ order.productionworkorderStatus }}</td>
          <td>{{ order.productionworkorderDescription }}</td>
          <td>{{ order.productionworkorderNumber }}</td>
          <td>
            <button @click="handleView(order.productionworkorderNameId)">查看</button>
          </td>
        </tr>
      </tbody>
    </table>
    <!-- 底部统计与分页（简化示例） -->
    <div class="footer-info">
      <span>共{{ totalItems }}项数据</span>
      <span>当前页：{{ currentPage }}</span>
    </div>
  </div>
</template>

<script setup>

import axios from 'axios';

import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
// 模拟生产工单数据
const orders = ref([]);

// 计算进度颜色
const getProgressColor = (percent) => {
  if (percent === 100) return 'green';
  if (percent === 0) return '#666'; // 灰色
  return 'blue'; // 其他情况蓝色
};

// 获取工单数据
const ShowFook = () => {
  axios.get("https://localhost:7006/api/Process/ProductionworkorderFile")
    .then(res => {
      console.log(res.data.data);
      orders.value = res.data.data;
    })
    .catch(error => {
      console.error('获取工单数据失败:', error);
    });
};

// 查看按钮处理函数
const handleView = (id) => {
  console.log('查看工单详情:', id);
  router.push(`/DaoBanView?id=${id}`)
};

// 模拟分页数据
const totalItems = ref(101);
const currentPage = ref(1);

onMounted(() => {
  ShowFook();
});
</script>

<style scoped>
.container {
  padding: 20px;
}

.order-table {
  width: 100%;
  border-collapse: collapse;
}

.order-table th,
.order-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.order-table th {
  background-color: #f5f5f5;
}

.footer-info {
  margin-top: 20px;
  color: #666;
}

button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 6px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
}

button:hover {
  background-color: #45a049;
}
</style>